<template>
	<z-paging class="app-container" ref="paging" :fixed="false" refresher-only @query="getTaskList">
		<view class="my-integral">
			<image class="cover-image" src="/static/images/task-center-bg.png" mode="aspectFill" />
			<view class="content">
				<view class="value">{{ integral }}</view>
				<view class="label">我的积分</view>
			</view>
		</view>
		<view class="task-list-box">
			<TaskList :task-list="taskList" @refreshTask="getTaskList" />
		</view>
	</z-paging>
</template>

<script setup>
	import TaskList from "@/components/TaskList";
	import {
		listTask
	} from "@/api";
	import {
		reactive,
		ref,
		toRefs
	} from "vue";

	const state = reactive({
		taskList: [],
		integral: 0
	});

	const paging = ref(null);

	const {
		taskList,
		integral
	} = toRefs(state);

	// 获取任务列表
	async function getTaskList() {
		const res = await listTask();
		taskList.value = res.data.list;
		integral.value = res.data.point;
		paging.value.complete();
	}
	
	getTaskList()
</script>

<style scoped lang="scss">
	.app-container {
		display: block;

		.my-integral {
			width: 100%;
			height: 300rpx;
			overflow: hidden;
			position: relative;

			.content {
				position: absolute;
				top: 36rpx;
				left: 40rpx;

				.value {
					font-size: 60rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.label {
					font-size: 30rpx;
					color: #CCDDFF;
				}
			}
		}

		.task-list-box {
			margin: -107rpx 20rpx 20rpx;
			position: relative;
			z-index: 1;
		}
	}
</style>